<template>
  <!-- 中间三行三列 -->
  <div class="module-box">
    <!-- 左侧三行部分 -->
    <div style="flex: 0 1 25%">
      <!-- 封装的ECharts图表 -->
      <dv-border-box-8 style="width: 100%; height: 150px">
        <ECharts />
      </dv-border-box-8>
      <!-- 锥形柱图 -->
      <dv-border-box-2 style="width: 100%; height: 150px">
        <dv-conical-column-chart
          :config="conicalConfig"
          style="
            width: 95%;
            height: 90%;
            position: absolute;
            top: 7px;
            left: 10px;
          "
        />
      </dv-border-box-2>
      <!-- 水位图 -->
      <dv-border-box-10 style="width: 100%; height: 150px">
        <dv-water-level-pond
          :config="waterConfig"
          style="width: 100%; height: 100%"
        />
      </dv-border-box-10>
    </div>
    <!-- 中间大屏展示（中国地图） -->
    <div style="flex: 0 1 50%">
      <ChinaMapVue />
    </div>
    <!-- 右侧两行布局 -->
    <div style="flex: 0 1 25%">
      <!-- 轮播表 -->
      <dv-border-box-12 style="width: 100%; height: 225px">
        <dv-scroll-ranking-board
          :config="scrollConfig"
          style="
            width: 90%;
            height: 90%;
            position: absolute;
            top: 10px;
            left: 15px;
          "
        />
      </dv-border-box-12>
      <!-- 排名轮播表 -->
      <dv-border-box-13 style="width: 100%; height: 225px">
        <dv-scroll-board
          :config="scrollBoardConfig"
          style="
            width: 88%;
            height: 87%;
            position: absolute;
            top: 15px;
            left: 20px;
          "
        />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
// 导入封装的 ECharts 组件
import ECharts from '@/components/ECharts.vue'
// 导入 ChinaMap 组件
import ChinaMapVue from '@/components/ChinaMap.vue'

export default {
  name: 'ModuleMain',
  components: {
    ECharts,
    ChinaMapVue
  },
  data() {
    return {
      // 水位图
      waterConfig: {
        data: [66, 45],
        shape: 'roundRect'
      },
      // 进度池
      percentConfig: {
        value: 66,
        borderWidth: 0,
        borderRadius: 10,
        borderGap: 5
      },
      // 锥形柱图
      conicalConfig: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 71
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 35
          },
          {
            name: '漯河',
            value: 15
          }
        ],
        img: [
          require('../assets/img/1st.png'),
          require('../assets/img/2st.png'),
          require('../assets/img/3st.png'),
          require('../assets/img/4st.png'),
          require('../assets/img/5st.png'),
          require('../assets/img/6st.png'),
          require('../assets/img/7st.png')
        ]
      },
      // 飞线图
      flylineConfig: {
        centerPoint: [0.48, 0.35],
        points: [
          {
            position: [0.52, 0.235],
            text: '新乡'
          },
          {
            position: [0.43, 0.29],
            text: '焦作'
          },
          {
            position: [0.59, 0.35],
            text: '开封'
          },
          {
            position: [0.53, 0.47],
            text: '许昌'
          },
          {
            position: [0.45, 0.54],
            text: '平顶山'
          },
          {
            position: [0.36, 0.38],
            text: '洛阳'
          },
          {
            position: [0.62, 0.55],
            text: '周口'
          },
          {
            position: [0.56, 0.56],
            text: '漯河'
          },
          {
            position: [0.37, 0.66],
            text: '南阳'
          },
          {
            position: [0.55, 0.81],
            text: '信阳'
          },
          {
            position: [0.55, 0.67],
            text: '驻马店'
          },
          {
            position: [0.37, 0.29],
            text: '济源'
          },
          {
            position: [0.2, 0.36],
            text: '三门峡'
          },
          {
            position: [0.76, 0.41],
            text: '商丘'
          },
          {
            position: [0.59, 0.18],
            text: '鹤壁'
          },
          {
            position: [0.68, 0.17],
            text: '濮阳'
          },
          {
            position: [0.59, 0.1],
            text: '安阳'
          }
        ],
        bgImgUrl: require('@/assets/img/map.jpg'),
        centerPointImg: {
          url: require('@/assets/img/mapCenterPoint.png')
        },
        pointsImg: {
          url: require('@/assets/img/mapPoint.png')
        }
      },
      // 轮播表
      scrollConfig: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      },
      // 排名轮播表
      scrollBoardConfig: {
        header: ['列1', '列2', '列3'],
        data: [
          ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
          ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
          ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
          ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
          ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
          ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
          ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
          ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
          ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
          ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  }
}
</script>

<style></style>
